<template>
    <scroll :data="sideList" class="side-wrap" ref="scroll">
      <div class="side">
        <div class="section firend-link">
          <h3 class="title">推广厂商</h3>
          <ul class="list">
            <li>
              <router-link to="/firend/5000"></router-link>
            </li>

            <li>
              <a href="#">王尼玛</a>
            </li>

            <li>
              <a href="#">王尼玛</a>
            </li>

            <li>
              <a href="#">王尼玛</a>
            </li>
          </ul>
        </div>

        <div class="section new">
          <h3 class="title">公司动态</h3>
          <ul class="list">
            <li>
              <router-link to="/new/classify1/100">新闻二</router-link>
            </li>

            <li>
              <router-link to="/new/classify2/100">新闻一</router-link>
            </li>

            <li>
              <a href="#">王尼玛</a>
            </li>

            <li>
              <a href="#">王尼玛</a>
            </li>
          </ul>
        </div>

        <div class="section product">
        <h3 class="title">最新产品</h3>
        <ul class="list">
          <li>
            <router-link to="/product/classify1">某某类型药剂1</router-link>
          </li>

          <li>
            <router-link to="/product/classify2">某某类型药剂2</router-link>
          </li>

          <li>
            <a href="#">王尼玛</a>
          </li>

          <li>
            <a href="#">王尼玛</a>
          </li>
        </ul>
      </div>
      </div>
    </scroll>
</template>

<script type="text/ecmascript-6">
    import Scroll from 'base/scroll/scroll'

    export default {
      components: {
        Scroll
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .side-wrap
    ltposition(0, 20px)
    overflow-y: hidden;
    bottom: 20px
    .side
      wh(200px, 760px)
      padding-top: 1px
    .section
      padding: 10px
      box-shadow: inset 0 0 10px 0px $vice-color
      h3
        hh(34px)
        font-weight: bold
        background-color: $vice-color
        sc($font-medium-x, $white)
        text-align: center
        br(3px 3px 0 0)
      ul.list
        padding:10px 10px 20px
        background-color: #f5f5f5
        overflow: hidden
        li
          float: left
          hh(24px)
          a
            width: 100%
            display: inline-block
            sc($font-small-x, $back)
          &:hover
            background-color: #f9f9f9
            a
              color: $vice-color
              text-decoration: underline
      &.new
        li
          width: 100%
      &.firend-link
        li
          width: 50%
      &.product
        li
          width: 100%
</style>
